<template>
    <div class="flex flex-col flex-1 p-2">
        <div class="flex justify-between">
            <div class="flex-1"></div>
            <div>
                <el-button type="primary" @click="openDialog">新增</el-button>
            </div>
        </div>
        <CustomTable class="mt-2" :data="tableData" :total="tableTotal" v-model:page-size="pageSize" @pageSize="getList"
            v-model:currentPage="pageNum" @currentPage="getList">
            <el-table-column type="index" width="60" label="序号" />
            <el-table-column prop="movieName" label="电影名称" />
            <el-table-column prop="movieImg" label="图片">
                <template #default="{ row }">
                    <el-image style="width: 100px; height: 100px" :src="row.movieImg" fit="cover" />

                </template>
            </el-table-column>
            <el-table-column prop="movieLength" label="电影时长" />
            <el-table-column prop="movieYear" label="上映年份" />
            <el-table-column prop="movieArea" label="制片地区" />
            <el-table-column prop="movieScore" label="电影评分" />
            <el-table-column prop="prizeTimes" label="点赞数" />
            <el-table-column prop="collectTimes" label="收藏数" />
            <el-table-column prop="buyTimes" label="购买数" />
            <el-table-column prop="commentTimes" label="评论数" />
            <el-table-column label="电影类型">
                <template #default="{ row }">
                    <div class="flex flex-wrap gap-2">

                        <el-tag v-for="item in row.movieTypes" type="primary">{{ item.typeName }}</el-tag>
                    </div>
                </template>
            </el-table-column>
            <el-table-column label="操作" width="160px">
                <template #default="{ row }">
                    <el-button text type="primary" @click="openEdit(row)">编辑</el-button>
                    <el-button text type="danger" @click="delRow(row)">删除</el-button>
                </template>
            </el-table-column>
        </CustomTable>
    </div>
    <CustomDialog v-model:show="addDialog" :title="(isEdit ? '修改' : '新增') + '电影'" width="1200px" @cancel="cancelDialog"
        @confirm="submitForm">
        <el-form ref="formRef" :model="movieForm" label-width="auto">
            <el-form-item label="电影名称" prop="movieName">
                <el-input v-model="movieForm.movieName"></el-input>
            </el-form-item>
            <el-form-item label="电影简介" prop="movieInfo">
                <el-input  type="textarea" v-model="movieForm.movieInfo"></el-input>
            </el-form-item>
            <el-form-item label="电影图片" prop="movieImg">
                <SingleUpload v-model="movieForm.movieImg"></SingleUpload>
            </el-form-item>
            <el-form-item label="电影文件" prop="url">
                <div class="flex flex-col">

                    <el-button type="danger" class="w-[60px]" :icon="Delete" @click="delUrl"></el-button>
                    <SingleFileUpload class="mt-2" v-model="movieForm.url"></SingleFileUpload>
                </div>
            </el-form-item>
            <el-form-item label="片长" prop="movieLength"><el-input
                    v-model="movieForm.movieLength"></el-input></el-form-item>
            <el-form-item label="上映年份" prop="movieYear"><el-input
                    v-model="movieForm.movieYear"></el-input></el-form-item>
            <el-form-item label="制片地区" prop="movieArea">
                <el-input v-model="movieForm.movieArea"></el-input>
            </el-form-item>
            <el-form-item label="电影评分" prop="movieScore">
                <el-rate v-model="movieForm.movieScore" />
            </el-form-item>
            <el-form-item label="演职人员">
                <template #default="{ row }">
                    <div class="flex flex-col">
                        <el-button class="w-[60px]" @click="addNewPer">新增</el-button>

                        <div class="flex flex-1 mt-2">
                            <div v-for="(item, index) in movieForm.moviePerformers" class="relative p-2 mr-2 shadow-md">
                                <div>演员照片：<SingleUpload v-model="movieForm.moviePerformers[index].performerImg">
                                    </SingleUpload>
                                </div>
                                <div>演员姓名：<el-input v-model="movieForm.moviePerformers[index].performerName"
                                        placeholder="请输入" /></div>
                                <div>演员简介：<el-input v-model="movieForm.moviePerformers[index].performerInfo"
                                        placeholder="请输入" />
                                </div>
                                <div>演员角色：<el-input v-model="movieForm.moviePerformers[index].performerRole"
                                        placeholder="请输入" />
                                </div>
                                <el-button class="absolute top-0 right-0" :icon="Delete" @click="delNewPer(index)"></el-button>
                            </div>
                        </div>
                    </div>

                </template>
            </el-form-item>
            <el-form-item label="电影类型">
                <template #default="{ row }">
                    <div class="flex flex-col">
                        <el-button class="w-[60px]" @click="addNewType">新增</el-button>

                        <div class="flex mt-2">
                            <div v-for="(item, index) in movieForm.movieTypes" class="flex mr-2">
                                <el-input v-model="movieForm.movieTypes[index].typeName" placeholder="请输入" />
                                <el-button :icon="Delete" @click="delNewType(index)"></el-button>
                            </div>

                        </div>
                    </div>

                </template>

            </el-form-item>
        </el-form>
    </CustomDialog>

</template>

<script setup lang="ts">
import CustomTable from '@/components/CustomTable.vue'
import { onMounted, reactive, ref } from 'vue'
import { getMovieList, addMovie, updateMovie, delMovie, getMovie } from '@/apis/movie'
import CustomDialog from '@/components/CustomDialog.vue'
import SingleUpload from '@/components/SingleUpload.vue'
import SingleFileUpload from '@/components/SingleFileUpload.vue'
import { ElMessage } from 'element-plus'
import {Delete} from '@element-plus/icons-vue'
import _ from 'lodash'
const tableData = ref([])
const tableTotal = ref(0)
const pageSize = ref(10)
const pageNum = ref(1)

const getList = async () => {
    const res = await getMovieList({
        pageNum: pageNum.value,
        pageSize: pageSize.value,
        movieName: ''
    })
    tableData.value = res.list
    tableTotal.value = res.total
}

const addDialog = ref()
const openDialog = () => {
    addDialog.value = true
    movieForm.value = {
        movieName: '',
        movieInfo: '',
        movieImg: '',
        url: '',
        movieLength: 0,
        movieYear: 0,
        movieArea: '',
        movieScore: 0,
        moviePerformers: [],
        movieTypes: []
    }
}
const cancelDialog = () => {
    addDialog.value = false
}
const submitForm = async () => {
    console.log(movieForm.value);
    
    if (isEdit.value) {
        await updateMovie({
            id: editTarget.value.id,
            movieName: movieForm.value.movieName,
            movieInfo: movieForm.value.movieInfo,
            movieImg: movieForm.value.movieImg,
            movieLength: movieForm.value.movieLength,
            movieYear: movieForm.value.movieYear,
            movieArea: movieForm.value.movieArea,
            movieScore: movieForm.value.movieScore,
            moviePerformers: movieForm.value.moviePerformers,
            movieTypes: movieForm.value.movieTypes,
            url: movieForm.value.url
        })
        ElMessage.success("编辑成功")

    } else {
        await addMovie({
            movieName: movieForm.value.movieName,
            movieInfo: movieForm.value.movieInfo,
            movieImg: movieForm.value.movieImg,
            movieLength: movieForm.value.movieLength,
            movieYear: movieForm.value.movieYear,
            movieArea: movieForm.value.movieArea,
            movieScore: movieForm.value.movieScore,
            moviePerformers: movieForm.value.moviePerformers,
            movieTypes: movieForm.value.movieTypes,
            url: movieForm.value.url
        })
        ElMessage.success("添加成功")
    }

    addDialog.value = false
    getList()
}
const addNewType = () => {
    if (!movieForm.value.movieTypes) {
        movieForm.value.movieTypes = []
    }
    movieForm.value.movieTypes.push({ typeName: '' })
}
const addNewPer = () => {
    if (!movieForm.value.moviePerformers) {
        movieForm.value.moviePerformers = []
    }
    movieForm.value.moviePerformers.push({
        performerName: "",
        performerImg: "",
        performerInfo: "",
        performerRole: ""
    })
}
const delNewPer = (idx) => {
    movieForm.value.moviePerformers.splice(idx, 1)
    
}
const delNewType = (idx) => {
    movieForm.value.movieTypes.splice(idx, 1)
    
}
const editTarget = ref()
const isEdit = ref(false)
const openEdit = async (row) => {
    const res = await getMovieInfo(row.id)
    isEdit.value = true
    addDialog.value = true
    const editRow = { ...res }
    if (!row.movieTypes) {
        editRow.movieTypes = []
        editRow.moviePerformers = []
    }
    Object.assign(movieForm.value, editRow)
    editTarget.value = row
}
const delRow = async (row) => {
    await delMovie(row.id)
    ElMessage.success('删除成功')
    getList()
}
const movieForm = ref({
    movieName: "",
    movieInfo: "",
    movieImg: "",
    url: "",
    movieLength: 0,
    movieYear: 0,
    movieArea: "",
    movieScore: 0,
    moviePerformers: [
    ],
    movieTypes: [
    ]
})
const getMovieInfo = async (id) => {
    return await getMovie(id)

}
const delUrl = () => {
    movieForm.value.url = ''
}
onMounted(() => {
    getList()
})
</script>

<style scoped></style>
